<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header page-scroll">
			<button type="button" class="navbar-toggle">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<!-- <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a> -->
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div id="huxblog_navbar">
			<div class="navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="{{ site.baseurl }}/">Home</a>
					</li>
					{% for page in site.pages %}{% if page.title %}
					<li>
						<a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
					</li>
					{% endif %}{% endfor %}
				</ul>
			</div>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container -->
</nav>
<style type="text/CSS">>
#search-input{
border:2px solid;border-radius:25px;padding-left:10px !important;
}
  .search {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: crimson;
    border-radius: 50%;
    transition: all 1s;
    z-index: 4;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
    // box-shadow: 0 0 25px 0 crimson;
  }
  .search:hover {
      cursor: pointer;
    }
    .search::before {
      content: "";
      position: absolute;
      margin: auto;
      top: 22px;
      right: 0;
      bottom: 0;
      left: 22px;
      width: 12px;
      height: 2px;
      background: white;
      transform: rotate(45deg);
      transition: all .5s;
    }
    .search::after {
      content: "";
      position: absolute;
      margin: auto;
      top: -5px;
      right: 0;
      bottom: 0;
      left: -5px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 2px solid white;
      transition: all .5s;
    }
  
  #search-input {
    font-family: 'Inconsolata', monospace;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 50px;
    outline: none;
    border: none;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: crimson;
    color: white;
    text-shadow: 0 0 10px crimson;
    padding: 0 80px 0 20px;
    border-radius: 30px;
    box-shadow: 0 0 25px 0 crimson,
                0 20px 25px 0 rgba(0, 0, 0, 0.2);
    // box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5);
    transition: all 1s;
    opacity: 0;
    z-index: 5;
    font-weight: bolder;
    letter-spacing: 0.1em;
  }
     #search-input:hover {
      cursor: pointer;
    }
    #search-input:focus {
      width: 300px;
      opacity: 1;
      cursor: text;
    }
    #search-input:focus ~ .search{
      right: -250px;
      background: #151515;
      z-index: 6;
    }
	#search-input:focus ~ .search::before {
        top: 0;
        left: 0;
        width: 25px;
      }
     #search-input:focus ~ .search::after {
        top: 0;
        left: 0;
        width: 25px;
        height: 2px;
        border: none;
        background: white;
        border-radius: 0%;
        transform: rotate(-45deg);
      }
    #search-input::placeholder {
      color: white;
      opacity: 0.5;
      font-weight: bolder;
    }
	#search-input:focus ~ #results-container{
      visibility:visible;
    }
	#results-container:hover{
		visibility:visible;
	}
	#results-container{
		background-color:white;
		color: white;
		margin: auto;
		padding: 60px 0px 0 20px;
		opacity: 0.9;
		font-weight: bolder;
		max-width:300px;
		visibility: hidden
	}
  
</style>
<!-- HTML elements for search-->
<div id="search-container"  class="search-container" style="float:right;
	position:fixed;
	right:0px; 
	bottom:10px; 
	z-index:999999;
	padding:10px 10px 0px 10px;
	top: 5%;
	height: 55px;
	left: 5%;
    width: 235px">
	<input type="text" id="search-input" placeholder="search...">
	<div class="search"></div>
	<ul id="results-container"></ul>
</div>

<!-- script pointing to jekyll-search.js-->
<script src="{{ "/js/simple-jekyll-search.min.js" | prepend: site.baseurl }}"></script>

<script>
	window.simpleJekyllSearch = new SimpleJekyllSearch({
		searchInput: document.getElementById('search-input'),
		resultsContainer: document.getElementById('results-container'),
		json: '{{ site.baseurl }}/search.json',
		searchResultTemplate: '<li><a href="{url}" title="{desc}">{title}</a></li>',
		noResultsText: 'No results found',
		limit: 5,
		fuzzy: false,
		exclude: ['Welcome']
	})
</script>

<script>
	// Drop Bootstarp low-performance Navbar
	// Use customize navbar with high-quality material design animation
	// in high-perf jank-free CSS3 implementation
	var $body = document.body;
	var $toggle = document.querySelector('.navbar-toggle');
	var $navbar = document.querySelector('#huxblog_navbar');
	var $collapse = document.querySelector('.navbar-collapse');

	var __HuxNav__ = {
		close: function() {
			$navbar.className = " ";
			// wait until animation end.
			setTimeout(function() {
				// prevent frequently toggle
				if ($navbar.className.indexOf('in') < 0) {
					$collapse.style.height = "0px"
				}
			}, 400)
		},
		open: function() {
			$collapse.style.height = "auto"
			$navbar.className += " in";
		}
	}

	// Bind Event
	$toggle.addEventListener('click', function(e) {
		if ($navbar.className.indexOf('in') > 0) {
			__HuxNav__.close()
		} else {
			__HuxNav__.open()
		}
	})

	/**
	 * Since Fastclick is used to delegate 'touchstart' globally
	 * to hack 300ms delay in iOS by performing a fake 'click',
	 * Using 'e.stopPropagation' to stop 'touchstart' event from 
	 * $toggle/$collapse will break global delegation.
	 * 
	 * Instead, we use a 'e.target' filter to prevent handler
	 * added to document close HuxNav.  
	 *
	 * Also, we use 'click' instead of 'touchstart' as compromise
	 */
	document.addEventListener('click', function(e) {
		if (e.target == $toggle) return;
		if (e.target.className == 'icon-bar') return;
		__HuxNav__.close();
	})
</script>
